<template>
	<view>
		<view class="custom-navbar" :style="{'height':capsuleTop}">
			<view class="custom-navbar-title">
				订单中心
			</view>
			
			<image class="custom-close-img" :src="icon15" mode="" @click="close"></image>
		</view>
		<view class="content" :style="{'margin-top':capsuleTop}" @click="btn">
			<view class="conten-top" :style="{'backgroundImage':`url(${poprp})`}">
				<view class="conten-top-img" :style="{'backgroundImage':`url(${poprp1})`}">
					订单详情
				</view>
				<view class="" style="margin-top: -40rpx;">
					<view class="top-text">
						店铺名称：xxx饭店
					</view>
					<view class="top-text">
						消费内容：1号包间餐费 
					</view>
					<view class="top-text">
						订单金额：<text style="color:#FF1919;font-weight: 600;">20006</text>
					</view>
					<view class="top-text">
						订单时间： 2024-02-01 21:33:22
					</view>
				</view>
				
			</view>
			<view class="conten-top" :style="{'backgroundImage':`url(${poprp2})`}">
				<view class="conten-top-img" :style="{'backgroundImage':`url(${poprp3})`}">
					支付详情
				</view>
				<view class="" style="margin-top: -40rpx;">
					<view class="top-text">
					本次消费用券抵扣：<text style="color:#FF1919;font-weight: 600;">80元</text>
					</view>
					<view class="top-text">
					本次消费线下支付： 2006元 
					</view>
					<view class="top-text">
					本次消费赠送券额： 2006元(代金券)
					</view>
				</view>
				
			</view>
			<view class="btn">
				确认使用券支付
			</view>
		</view>
	</view>
</template>

<script>
	import {
		log
	} from 'util';

	export default {
		components: {

		},
		data() {
			return {
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 35.5 + 'px',
				popupShow: false,
				poprp: '../../static/3.png',
				poprp1: '../../static/2.png',
				poprp2: '../../static/4.png',
				poprp3: '../../static/1.png',
			}
		},

		onShow() {
			this.index();
		},
		watch: {

		},
		methods: {
		btn(){
			uni.showToast({
						title: "正在开发中，敬请期待！",
						icon: 'none',
						mask:true,
					});
		},
		close() {
			uni.navigateBack();
		},
		}

	}
</script>

<style lang="scss" scoped>
	.custom-navbar {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		text-align: center;
		font-size: 44rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 500;
		color: #333333;
		/* 导航栏高度 */
		background-image: linear-gradient(to right, #caecf8 0%, #fff 100%);
		/* 渐变色 */
		/* 其他样式 */
	}
	.custom-navbar-title {
		width: 100%;
		position: absolute;
		bottom: 10rpx;
		text-align: center;
	}

	.custom-top {
		width: 100%;
	}
	.content {
		overflow: hidden;
		width: 100%;
		height: 100vh;
		background-color: #F3F4F9;;
	}
	.conten-top {
		box-sizing: border-box;
		overflow: hidden;
		margin: 60rpx auto 0;
		
		width: 694rpx;
		height: 372rpx;
		background: no-repeat;
		background-size: 100% 100%;
	}
	.conten-top-img {
		padding: 40rpx 59rpx 0;
		overflow: hidden;
		width: 694rpx;
		height: 186rpx;
		background: no-repeat;
		background-size: 100% 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}
	.top-text {
		margin-top: 5rpx;
		padding: 0 59rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.btn {
		margin: 117rpx auto 0;
		width: 373rpx;
		height: 79rpx;
		background: #34C8E8;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		text-align: center;
		line-height:79rpx ;
	}
	.custom-close-img {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
		color: #000000;
	}
</style>